<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相邻兄弟选择器的高级用法</title>
		<style>
			.remind {
				margin: 0 8px;
				color: lightgray;
				opacity: 0;
				transition: opacity .2s; 
				user-select: none;
			}
			input:focus + .remind {
				opacity: 1;
			}
			
			li + li {
				color: #096DD3;
			}
		</style>
	</head>
	<body>
		<span>输入框： </span><input><span class="remind">一点提示</span>
		<hr>
		实现类似:first-child的效果
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>
